<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>军军数学-两位数加减法(多设备兼容版)</title>
		<style type="text/css">
			@media only screen and (min-width: 320px) {
				html{ font-size: 10px!important; line-height: 26px;				
					}
			}
			@media only screen and (min-width: 360px) {
				html{
					font-size: 11.25px!important;line-height: 28px;				}
			}
			@media only screen and (min-width: 400px) {
				html{
					font-size: 12.5px!important; line-height: 30px;				}
			}
			@media only screen and (min-width: 480px) {
				html{
					font-size: 15px!important; line-height: 32px;				}
			}
			@media only screen and (min-width: 640px) {
				html{
					font-size: 20px!important; line-height: 34px;				}
			}
			@media only screen and (min-width: 800px) {
				html{
					font-size: 25px!important;	line-height: 36px;			}
			}	
			
			div,ul,li{margin: 0px; padding: 0px;}
			li{ list-style-type: none;}
			#myTitle{text-align: center; font-weight: bold;}
			#myButtons{text-align: center; }
			#myContent{width:100%; margin: 20px auto 20px auto;}
			#myContent li{ width: 200px; float: left;
			border-color: black; border-style: solid; border-width: 0px 0px 1px 0px;}
			#myContent li img{vertical-align:middle; display: none;}
			#myContent li span{color: red;}
		</style>
		<script type="text/javascript">
			var count = 20;  //题目数量
			var arr = new Array(count); //定义数组
			var minValue = 10;
			var maxValue = 99;
			//随机生成题目到数组
			function CreateTimu()
			{
				//将ul下面所有li节点清除
				var objUl = document.getElementById("myUl");
				while(objUl.hasChildNodes())
				{
					objUl.removeChild(objUl.firstChild);
				}
				//循环出题
				for(var i = 0;i< arr.length; i++)
				{
					var a = Math.ceil(Math.random()*maxValue);
					if(a < 10) a=a+" ";
					var b = Math.ceil(Math.random()*maxValue);
					if(b < 10) b=b+" ";
					var result = 0;
					var mySymbol = Math.ceil(Math.random()*2);
					if(mySymbol == 1)
					{
						mySymbol = "+";
						result = parseInt(a) + parseInt(b);
					}	
					if(mySymbol == 2)
					{
						mySymbol = "-";
						result = parseInt(a) - parseInt(b);
					}
					if(result <= 0 || result >= 100)
					{
						i--;
						continue;
					}
					arr[i] = a + "," + mySymbol + "," + b + "," + result;
				}
			}
			//将数组中的题目显示到页面
			function ShowTimu()
			{
				for(var i = 0;i< arr.length; i++)
				{
					var tempArr = arr[i].split(","); //
					var newNode = document.createElement("li");
					newNode.id = "li" + i;
					newNode.innerHTML = tempArr[0] + tempArr[1] + tempArr[2] + "= ";
					newNode.innerHTML += "<input type='text' size='3' id='txt"+i+"'>"
					newNode.innerHTML += "<img id='img"+i+"'>";
					newNode.innerHTML += "<span id='span"+i+"'></span>"
					document.getElementById("myUl").appendChild(newNode);
				}
			}
			//自动改卷
			function ShowAnswer()
			{
				if(arr[0] == undefined || arr[arr.length-1] == undefined)
				{
					alert("还没有生成题目");
				}
				for(var i = 0;i< arr.length; i++)
				{
					var tempArr = arr[i].split(","); 
					if(tempArr[3] == document.getElementById("txt" + i).value)
					{
						document.getElementById("img" + i).src = "img/li_ok.gif";
						document.getElementById("img" + i).style.display = "inline";
					}
					else
					{
						document.getElementById("img" + i).src = "img/li_err.gif";
						document.getElementById("img" + i).style.display = "inline";
						document.getElementById("span" + i).innerHTML = tempArr[3];
					}
				}				
			}
			
		</script>
	</head>
	<body>
		<div id="myTitle">军军数学-两位数加减法</div>
		<div id="myButtons">
			<input type="button" value="生成题目" onclick="CreateTimu();ShowTimu();">
			<input type="button" value="自动改卷" onclick="ShowAnswer();">
		</div>
		<div id="myContent">
			<ul id="myUl">
			</ul>
		</div>
	</body>
</html>
